<template>
  <div class="user-payment-test-container">
    <div class="page-header">
      <h1>💳 第一性原理支付测试</h1>
      <p>基于第一性原理的支付架构，验证四要素驱动的支付流程</p>
      <div class="workflow-steps">
        <div class="step active">1️⃣ 订单信息</div>
        <div class="step" :class="{ active: currentStep >= 1 }">2️⃣ 支付应用配置</div>
        <div class="step" :class="{ active: currentStep >= 2 }">3️⃣ 支付产品</div>
        <div class="step" :class="{ active: currentStep >= 3 }">4️⃣ 用户</div>
        <div class="step" :class="{ active: currentStep >= 4 }">5️⃣ 执行支付</div>
      </div>
    </div>

    <!-- 订单信息配置 -->
    <div class="order-section">
      <h2>📋 订单信息</h2>
      <div class="order-form">
        <div class="form-row">
          <div class="form-group">
            <label>订单号:</label>
            <input v-model="orderForm.orderId" type="text" readonly />
          </div>
          <div class="form-group">
            <label>订单金额:</label>
            <input v-model="orderForm.amount" type="number" step="0.01" min="0.01" />
          </div>
          <div class="form-group">
            <label>货币类型:</label>
            <select v-model="orderForm.currency">
              <option value="CNY">人民币 (CNY)</option>
              <option value="USD">美元 (USD)</option>
            </select>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>商品名称:</label>
            <input v-model="orderForm.productName" type="text" />
          </div>
          <div class="form-group">
            <label>超时时间:</label>
            <input v-model="orderForm.expireMinutes" type="number" min="1" max="1440" />
            <span class="unit">分钟</span>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group full-width">
            <label>商品描述:</label>
            <textarea v-model="orderForm.description" rows="3"></textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付应用配置选择区域 -->
    <div class="payment-app-section">
      <h2>⚙️ 支付应用配置</h2>
      <div class="app-selector">
        <div class="form-group">
          <label>选择支付应用配置:</label>
          <select v-model="selectedPaymentApp" @change="onPaymentAppChange">
            <option value="">请选择支付应用配置</option>
            <option v-for="app in paymentAppList" :key="app.appId" :value="app.appId">
              {{ app.appName }} ({{ getMerchantName(app.merchantId) }})
            </option>
          </select>
        </div>

        <div v-if="currentPaymentApp" class="app-info">
          <div class="info-grid">
            <div class="info-item">
              <span class="label">应用ID:</span>
              <span class="value">{{ currentPaymentApp.appId }}</span>
            </div>
            <div class="info-item">
              <span class="label">应用名称:</span>
              <span class="value">{{ currentPaymentApp.appName }}</span>
            </div>
            <div class="info-item">
              <span class="label">商户名称:</span>
              <span class="value">{{ getMerchantName(currentPaymentApp.merchantId) }}</span>
            </div>
            <div class="info-item">
              <span class="label">应用类型:</span>
              <span class="value">
                <span class="type-tag" :class="currentPaymentApp.appType.toLowerCase()">
                  {{ getAppTypeName(currentPaymentApp.appType) }}
                </span>
              </span>
            </div>
            <div class="info-item">
              <span class="label">连接模式:</span>
              <span class="value">
                <span class="type-tag" :class="currentPaymentApp.connectMode.toLowerCase()">
                  {{ currentPaymentApp.connectMode === 'DIRECT' ? '直连模式' : '间连模式' }}
                </span>
              </span>
            </div>
            <div class="info-item">
              <span class="label">应用状态:</span>
              <span class="value">
                <span class="type-tag" :class="currentPaymentApp.status === 1 ? 'enabled' : 'disabled'">
                  {{ currentPaymentApp.status === 1 ? '启用' : '禁用' }}
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付产品选择区域 -->
    <div v-if="selectedPaymentApp" class="payment-product-section">
      <h2>💳 支付产品</h2>
      <div class="product-selector">
        <div class="form-group">
          <label>选择支付产品:</label>
          <select v-model="selectedPaymentProduct" @change="onPaymentProductChange">
            <option value="">请选择支付产品</option>
                      <option v-for="product in availableProducts" :key="product.productCode" :value="product.productCode">
            {{ product.productName }}
          </option>
          </select>
        </div>

        <div v-if="currentPaymentProduct" class="product-info">
          <div class="info-grid">
            <div class="info-item">
              <span class="label">产品代码:</span>
              <span class="value">{{ currentPaymentProduct.productCode }}</span>
            </div>
            <div class="info-item">
              <span class="label">产品名称:</span>
              <span class="value">{{ currentPaymentProduct.productName }}</span>
            </div>
            <div class="info-item">
              <span class="label">产品描述:</span>
              <span class="value">{{ currentPaymentProduct.description }}</span>
            </div>

            <div class="info-item">
              <span class="label">最小金额:</span>
              <span class="value">￥{{ currentPaymentProduct.minAmount }}</span>
            </div>
            <div class="info-item">
              <span class="label">最大金额:</span>
              <span class="value">￥{{ currentPaymentProduct.maxAmount }}</span>
            </div>
            <div class="info-item">
              <span class="label">支持场景:</span>
              <span class="value">{{ currentPaymentProduct.supportedScenes.join(', ') }}</span>
            </div>
          </div>

          <!-- 渠道映射信息 -->
          <div v-if="currentPaymentProduct.channelMappings.length > 0" class="channel-mappings">
            <h4>🔗 渠道映射配置</h4>
            <div class="channel-list">
              <div
                v-for="channel in currentPaymentProduct.channelMappings"
                :key="channel.channelId"
                class="channel-item"
              >
                <div class="channel-header">
                  <span class="channel-name">{{ channel.channelName }}</span>
                  <span class="channel-type" :class="channel.channelType.toLowerCase()">
                    {{ channel.channelType === 'DIRECT' ? '直连' : '服务商' }}
                  </span>
                  <span class="channel-status" :class="channel.configStatus.toLowerCase()">
                    {{ channel.configStatus === 'ACTIVE' ? '可用' : '不可用' }}
                  </span>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户选择区域 -->
    <div v-if="selectedPaymentProduct" class="user-section">
      <h2>👤 用户</h2>
      <div class="user-selector">
        <div class="form-group">
          <label>选择用户:</label>
          <select v-model="selectedUser" @change="onUserChange">
            <option value="">请选择用户</option>
            <option v-for="user in userList" :key="user.userId" :value="user.userId">
              {{ user.userName }} ({{ user.userType }})
            </option>
          </select>
        </div>

        <div v-if="currentUser" class="user-info">
          <div class="info-grid">
            <div class="info-item">
              <span class="label">用户ID:</span>
              <span class="value">{{ currentUser.userId }}</span>
            </div>
            <div class="info-item">
              <span class="label">用户名称:</span>
              <span class="value">{{ currentUser.userName }}</span>
            </div>
            <div class="info-item">
              <span class="label">用户类型:</span>
              <span class="value">{{ currentUser.userType }}</span>
            </div>
            <div class="info-item">
              <span class="label">偏好渠道:</span>
              <span class="value">{{ currentUser.preferredChannel }}</span>
            </div>
            <div class="info-item">
              <span class="label">设备平台:</span>
              <span class="value">{{ currentUser.deviceInfo.platform }}</span>
            </div>
            <div class="info-item">
              <span class="label">客户端IP:</span>
              <span class="value">{{ currentUser.deviceInfo.ip }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付测试执行 -->
    <div v-if="selectedUser" class="payment-test-section">
      <h2>🚀 执行支付测试</h2>
      <div class="test-summary">
        <div class="summary-item">
          <span class="label">支付应用:</span>
          <span class="value">{{ currentPaymentApp?.appName }}</span>
        </div>
        <div class="summary-item">
          <span class="label">支付产品:</span>
          <span class="value">{{ currentPaymentProduct?.productName }}</span>
        </div>
        <div class="summary-item">
          <span class="label">用户:</span>
          <span class="value">{{ currentUser?.userName }}</span>
        </div>
        <div class="summary-item">
          <span class="label">订单金额:</span>
          <span class="value">￥{{ orderForm.amount }}</span>
        </div>
      </div>

      <div class="test-actions">
        <button
          @click="startPaymentTest"
          :disabled="isProcessing || !canStartPayment"
          class="test-button primary large"
        >
          {{ isProcessing ? '处理中...' : '发起支付测试' }}
        </button>
        <button
          @click="viewPaymentContext"
          :disabled="!paymentResult"
          class="test-button secondary"
        >
          查看PaymentContext
        </button>
        <button
          @click="clearResults"
          class="test-button secondary"
        >
          清空结果
        </button>
      </div>
    </div>

    <!-- 支付结果展示 -->
    <div v-if="paymentResult" class="result-section">
      <h2>📊 支付测试结果</h2>
      <div class="result-card" :class="paymentResult.success ? 'success' : 'error'">
        <div class="result-header">
          <div class="result-icon">{{ paymentResult.success ? '✅' : '❌' }}</div>
          <div class="result-status">
            <h3>{{ paymentResult.success ? '支付成功' : '支付失败' }}</h3>
            <p>{{ paymentResult.message }}</p>
          </div>
        </div>

        <div v-if="paymentResult.success" class="result-details">
          <div class="detail-item">
            <span class="label">交易单号:</span>
            <span class="value">{{ paymentResult.transactionId }}</span>
          </div>
          <div class="detail-item">
            <span class="label">支付时间:</span>
            <span class="value">{{ paymentResult.payTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">支付链接:</span>
            <a v-if="paymentResult.payUrl" :href="paymentResult.payUrl" target="_blank" class="pay-link">
              {{ paymentResult.payUrl }}
            </a>
          </div>
        </div>

        <div v-if="!paymentResult.success && paymentResult.errorCode" class="error-details">
          <div class="detail-item">
            <span class="label">错误码:</span>
            <span class="value">{{ paymentResult.errorCode }}</span>
          </div>
          <div class="detail-item">
            <span class="label">错误描述:</span>
            <span class="value">{{ paymentResult.errorMessage }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理日志展示 -->
    <div v-if="processLogs.length > 0" class="logs-section">
      <h2>📝 处理日志</h2>
      <div class="logs-container">
        <div
          v-for="(log, index) in processLogs"
          :key="index"
          class="log-item"
          :class="log.level"
        >
          <span class="log-time">{{ log.timestamp }}</span>
          <span class="log-level">{{ log.level.toUpperCase() }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </div>

    <!-- 未配置提示 -->
    <div v-if="!selectedPaymentApp" class="no-config-tip">
      <div class="tip-icon">⚙️</div>
      <h3>请先选择支付应用配置</h3>
      <p>支付应用配置是支付流程的核心，它定义了商户的支付能力和产品组合</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { appConfigs, type AppConfig, getAppTypeName, mockLoadProductConfig, mockLoadChannelConfig, type ChannelConfig } from '@/mock/appconfigs'
import { merchants, getMerchantName } from '@/mock/merchants'

// 接口定义
// 使用真实的 AppConfig 接口，不再需要自定义 PaymentApp 接口

// 本地定义 ProductConfig 接口
interface ProductConfig {
  productCode: string
  productName: string
  productType: string
  enabled: boolean
  feeRate: number
  minAmount: number
  maxAmount: number
  channelMappings: Array<{
    channelId: string
    channelCode: string
    channelName: string
    merchantNo: string
    feeRate: number
    enabled: boolean
    channelType: string
    configStatus: string
  }>
  description: string
  supportedScenes: string[]
}

// 使用从 mock 文件导入的 ChannelConfig 接口

interface TestUser {
  userId: string
  userName: string
  userType: string
  preferredChannel: string
  deviceInfo: {
    platform: string
    userAgent: string
    ip: string
  }
}

interface OrderForm {
  orderId: string
  amount: number
  currency: string
  productName: string
  description: string
  expireMinutes: number
}

interface PaymentResult {
  success: boolean
  message: string
  transactionId?: string
  payTime?: string
  payUrl?: string
  errorCode?: string
  errorMessage?: string
}

interface ProcessLog {
  timestamp: string
  level: 'info' | 'warn' | 'error' | 'debug'
  message: string
}

// 响应式数据
const router = useRouter()
const currentStep = ref(0)

// 选择的数据
const selectedPaymentApp = ref('')
const selectedPaymentProduct = ref('')
const selectedUser = ref('')

// 当前数据对象
const currentPaymentApp = ref<AppConfig | null>(null)
const currentPaymentProduct = ref<ProductConfig | null>(null)
const currentUser = ref<TestUser | null>(null)

// 产品和渠道配置数据
const productConfigs = ref<ProductConfig[]>([])
const channelConfigs = ref<ChannelConfig[]>([])
const isLoadingProducts = ref(false)
const isLoadingChannels = ref(false)

// 其他状态
const isProcessing = ref(false)
const paymentResult = ref<PaymentResult | null>(null)
const processLogs = ref<ProcessLog[]>([])

// 订单表单
const orderForm = ref<OrderForm>({
  orderId: `ORDER_${Date.now()}`,
  amount: 100.00,
  currency: 'CNY',
  productName: '测试商品',
  description: '这是一个测试订单',
  expireMinutes: 30
})

// 使用真实的 appConfigs 数据
const paymentAppList = ref<AppConfig[]>(appConfigs)

const userList = ref<TestUser[]>([
  {
    userId: 'user_001',
    userName: '生辉',
    userType: '企业用户',
    preferredChannel: '微信支付',
    deviceInfo: {
      platform: 'iOS',
      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)',
      ip: '192.168.1.100'
    }
  },
  {
    userId: 'user_002',
    userName: 'Bruce',
    userType: '个人用户',
    preferredChannel: '支付宝',
    deviceInfo: {
      platform: 'Android',
      userAgent: 'Mozilla/5.0 (Linux; Android 12; SM-G991B)',
      ip: '192.168.1.101'
    }
  },
  {
    userId: 'user_003',
    userName: 'Musk',
    userType: 'VIP用户',
    preferredChannel: '银行卡',
    deviceInfo: {
      platform: 'Web',
      userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
      ip: '192.168.1.102'
    }
  }
])

// 计算属性
const availableProducts = computed(() => {
  return productConfigs.value.filter(product => product.enabled)
})

const canStartPayment = computed(() => {
  return selectedPaymentApp.value &&
         selectedPaymentProduct.value &&
         selectedUser.value &&
         orderForm.value.amount > 0
})

// 方法
const onPaymentAppChange = async () => {
  currentPaymentApp.value = paymentAppList.value.find(app => app.appId === selectedPaymentApp.value) || null
  selectedPaymentProduct.value = ''
  currentPaymentProduct.value = null
  selectedUser.value = ''
  currentUser.value = null

  // 清空产品和渠道配置
  productConfigs.value = []
  channelConfigs.value = []

  if (currentPaymentApp.value) {
    currentStep.value = 1
    // 生成新的订单号
    orderForm.value.orderId = `ORDER_${Date.now()}`
    addLog('info', `🏢 选择支付应用配置: ${currentPaymentApp.value.appName}`)
    addLog('debug', `🔍 应用详情: AppID=${currentPaymentApp.value.appId}, 类型=${currentPaymentApp.value.appType}, 连接模式=${currentPaymentApp.value.connectMode}`)

    // 输出应用的产品-渠道映射配置
    if (currentPaymentApp.value.productChannelMapping) {
      addLog('debug', `📋 应用产品-渠道映射配置: ${JSON.stringify(currentPaymentApp.value.productChannelMapping, null, 2)}`)
    } else {
      addLog('warn', `⚠️ 应用没有产品-渠道映射配置`)
    }

    // 加载产品配置和渠道配置
    await loadProductAndChannelConfigs(currentPaymentApp.value.appId)
  } else {
    currentStep.value = 0
    addLog('debug', `🔄 清空应用选择`)
  }
}

const onPaymentProductChange = () => {
  currentPaymentProduct.value = availableProducts.value.find(product => product.productCode === selectedPaymentProduct.value) || null
  selectedUser.value = ''
  currentUser.value = null

  if (currentPaymentProduct.value) {
    currentStep.value = 2
    addLog('info', `选择支付产品: ${currentPaymentProduct.value.productName}`)

    // 显示产品的渠道映射信息
    if (currentPaymentProduct.value.channelMappings.length > 0) {
      const channelInfo = currentPaymentProduct.value.channelMappings.map(channel =>
        `${channel.channelName}(${channel.channelType})`
      ).join(', ')
      addLog('info', `产品渠道映射: ${channelInfo}`)
    }
  } else {
    currentStep.value = 1
  }
}

const onUserChange = () => {
  currentUser.value = userList.value.find(user => user.userId === selectedUser.value) || null

  if (currentUser.value) {
    currentStep.value = 3
    addLog('info', `选择用户: ${currentUser.value.userName} (${currentUser.value.userType})`)
  } else {
    currentStep.value = 2
  }
}

const startPaymentTest = async () => {
  if (!canStartPayment.value) {
    return
  }

  isProcessing.value = true
  currentStep.value = 4
  addLog('info', '开始支付测试...')

  try {
    // 构建支付请求数据
    const paymentRequest = {
      appId: selectedPaymentApp.value,
      productCode: selectedPaymentProduct.value,
      userId: selectedUser.value,
      orderId: orderForm.value.orderId,
      amount: orderForm.value.amount,
      currency: orderForm.value.currency,
      subject: orderForm.value.productName,
      body: orderForm.value.description,
      expireTime: orderForm.value.expireMinutes,
      deviceId: 'dev_mock_001', // 模拟设备ID
      deviceInfo: currentUser.value?.deviceInfo
    }

      addLog('debug', `构建支付请求: ${JSON.stringify(paymentRequest)}`)
  addLog('info', `传输数据: 设备ID=${paymentRequest.deviceId}, 产品类型=${paymentRequest.productCode}`)

  // 调用模拟API
  const response = await mockPaymentApi(paymentRequest)

    paymentResult.value = response

    if (response.success) {
      addLog('info', `支付成功! 交易单号: ${response.transactionId}`)
    } else {
      addLog('error', `支付失败: ${response.message}`)
    }
  } catch (error) {
    addLog('error', `支付测试异常: ${error}`)
    paymentResult.value = {
      success: false,
      message: '支付测试异常',
      errorCode: 'SYSTEM_ERROR',
      errorMessage: error instanceof Error ? error.message : '未知错误'
    }
  } finally {
    isProcessing.value = false
  }
}

const viewPaymentContext = () => {
  // 跳转到PaymentContext展示页面
  router.push('/development-test/payment-context-display')
}

const clearResults = () => {
  paymentResult.value = null
  processLogs.value = []
  addLog('info', '清空测试结果')
}

const addLog = (level: ProcessLog['level'], message: string) => {
  processLogs.value.push({
    timestamp: new Date().toLocaleTimeString(),
    level,
    message
  })
}

// 加载产品配置和渠道配置
const loadProductAndChannelConfigs = async (appId: string) => {
  try {
    isLoadingProducts.value = true
    isLoadingChannels.value = true

    addLog('info', `🔄 正在加载产品配置和渠道配置... AppID: ${appId}`)

    // 并行加载产品配置和渠道配置
    const [productResponse, channelResponse] = await Promise.all([
      mockLoadProductConfig(appId),
      mockLoadChannelConfig(appId)
    ])

    // 详细输出原始响应数据
    addLog('debug', `📥 产品配置原始响应: ${JSON.stringify(productResponse, null, 2)}`)
    addLog('debug', `📥 渠道配置原始响应: ${JSON.stringify(channelResponse, null, 2)}`)

    productConfigs.value = productResponse.data
    channelConfigs.value = channelResponse.data

    addLog('info', `✅ 加载完成: ${productConfigs.value.length}个产品，${channelConfigs.value.length}个渠道`)

    // 输出产品和渠道的详细信息
    productConfigs.value.forEach((product, index) => {
      addLog('debug', `📦 产品${index + 1}: ${product.productName} (${product.productCode})`)
      addLog('debug', `   - 启用状态: ${product.enabled}`)
      addLog('debug', `   - 费率: ${product.feeRate}%`)
      addLog('debug', `   - 渠道映射数量: ${product.channelMappings?.length || 0}`)

      if (product.channelMappings && product.channelMappings.length > 0) {
        product.channelMappings.forEach((channel, channelIndex) => {
          addLog('debug', `   - 渠道${channelIndex + 1}: ${channel.channelName} (${channel.channelId})`)
          addLog('debug', `     状态: ${channel.configStatus}`)
        })
      } else {
        addLog('debug', `   - ⚠️ 未配置渠道映射`)
      }
    })

    channelConfigs.value.forEach((channel, index) => {
      addLog('debug', `🔗 渠道${index + 1}: ${channel.channelName} (${channel.channelId})`)
      addLog('debug', `   - 类型: ${channel.channelType}`)
      addLog('debug', `   - 费率: ${channel.feeRate}%`)
      addLog('debug', `   - 状态: ${channel.configStatus}`)
    })

    // 特别检查WXPAY_H5产品
    const wechatH5Product = productConfigs.value.find(p => p.productCode === 'WXPAY_H5')
    if (wechatH5Product) {
      addLog('info', `🎯 找到WXPAY_H5产品配置:`)
      addLog('info', `   - 产品名称: ${wechatH5Product.productName}`)
      addLog('info', `   - 启用状态: ${wechatH5Product.enabled}`)
      addLog('info', `   - 费率: ${wechatH5Product.feeRate}%`)
      addLog('info', `   - 渠道映射: ${JSON.stringify(wechatH5Product.channelMappings)}`)
    } else {
      addLog('error', `❌ 未找到WXPAY_H5产品配置`)
    }

  } catch (error) {
    addLog('error', `❌ 加载配置失败: ${error}`)
    console.error('详细错误信息:', error)
  } finally {
    isLoadingProducts.value = false
    isLoadingChannels.value = false
  }
}

// 模拟支付API调用
const mockPaymentApi = async (request: any): Promise<PaymentResult> => {
  // 模拟网络延迟
  await new Promise(resolve => setTimeout(resolve, 2000))

  addLog('info', '接收扫码数据: 设备ID + 订单信息 + 支付产品类型')
  await new Promise(resolve => setTimeout(resolve, 200))

  addLog('info', '验证支付应用配置...')
  await new Promise(resolve => setTimeout(resolve, 300))

  addLog('info', '验证支付产品类型支持...')
  await new Promise(resolve => setTimeout(resolve, 400))

  addLog('info', '构建PaymentContext...')
  await new Promise(resolve => setTimeout(resolve, 500))

  addLog('info', '根据产品类型查找渠道配置...')
  await new Promise(resolve => setTimeout(resolve, 600))

  addLog('info', '调用支付产品...')
  await new Promise(resolve => setTimeout(resolve, 800))

  addLog('info', '发送支付请求到渠道...')
  await new Promise(resolve => setTimeout(resolve, 1000))

  // 模拟成功率（90%成功）
  const isSuccess = Math.random() > 0.1

  if (isSuccess) {
    return {
      success: true,
      message: '支付成功',
      transactionId: `TXN_${Date.now()}`,
      payTime: new Date().toLocaleString(),
      payUrl: `https://pay.example.com/pay?orderId=${request.orderId}`
    }
  } else {
    const errorCodes = ['INSUFFICIENT_BALANCE', 'INVALID_SIGNATURE', 'MERCHANT_NOT_EXIST', 'PRODUCT_NOT_SUPPORT']
    const errorCode = errorCodes[Math.floor(Math.random() * errorCodes.length)]

    return {
      success: false,
      message: '支付失败',
      errorCode,
      errorMessage: '模拟支付失败场景'
    }
  }
}

onMounted(() => {
  addLog('info', '第一性原理支付测试界面已加载')
})
</script>

<style scoped>
.user-payment-test-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.page-header p {
  font-size: 18px;
  margin: 0 0 24px 0;
  opacity: 0.9;
}

.workflow-steps {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.step {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.step.active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* 支付应用配置区域 */
.payment-app-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  border-left: 4px solid #1890ff;
}

.payment-app-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.app-selector .form-group {
  margin-bottom: 16px;
}

.app-selector select {
  width: 100%;
  max-width: 500px;
  padding: 10px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.app-selector select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.app-info {
  background: #f0f9ff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #1890ff;
}

/* 支付产品区域 */
.payment-product-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  border-left: 4px solid #52c41a;
}

.payment-product-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.product-selector .form-group {
  margin-bottom: 16px;
}

.product-selector select {
  width: 100%;
  max-width: 500px;
  padding: 10px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.product-selector select:focus {
  outline: none;
  border-color: #52c41a;
  box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
}

.product-info {
  background: #f6ffed;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #52c41a;
}

/* 用户区域 */
.user-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  border-left: 4px solid #722ed1;
}

.user-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.user-selector .form-group {
  margin-bottom: 16px;
}

.user-selector select {
  width: 100%;
  max-width: 500px;
  padding: 10px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.user-selector select:focus {
  outline: none;
  border-color: #722ed1;
  box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
}

.user-info {
  background: #f9f0ff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #722ed1;
}

/* 通用信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-item .label {
  font-weight: 500;
  color: #666;
  margin-right: 8px;
}

.info-item .value {
  color: #1a1a1a;
  font-weight: 500;
}

.type-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 应用类型样式 */
.type-tag.cashier {
  background: #1890ff;
  color: white;
}

.type-tag.mobile {
  background: #52c41a;
  color: white;
}

.type-tag.web {
  background: #faad14;
  color: white;
}

/* 连接模式样式 */
.type-tag.direct {
  background: #1890ff;
  color: white;
}

.type-tag.indirect {
  background: #52c41a;
  color: white;
}

/* 状态样式 */
.type-tag.enabled {
  background: #52c41a;
  color: white;
}

.type-tag.disabled {
  background: #ff4d4f;
  color: white;
}

/* 渠道映射样式 */
.channel-mappings {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.channel-mappings h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.channel-item {
  background: white;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}

.channel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.channel-name {
  font-weight: 600;
  color: #1a1a1a;
}

.channel-type {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.channel-type.direct {
  background: #1890ff;
  color: white;
}

.channel-type.provider {
  background: #52c41a;
  color: white;
}

.channel-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.channel-status.active {
  background: #52c41a;
  color: white;
}

.channel-status.inactive {
  background: #ff4d4f;
  color: white;
}

.channel-details {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.channel-details span {
  padding: 2px 6px;
  background: #f0f0f0;
  border-radius: 4px;
}

/* 表单样式 */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.form-group select,
.form-group input,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 订单信息区域 */
.order-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  border-left: 4px solid #f50057;
}

.order-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.order-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.order-form .form-group.full-width {
  grid-column: 1 / -1;
}

.order-form .form-group .unit {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

/* 支付测试执行区域 */
.payment-test-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  border-left: 4px solid #13c2c2;
}

.payment-test-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.test-summary {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 4px 0;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-item .label {
  font-weight: 500;
  color: #666;
}

.summary-item .value {
  color: #1a1a1a;
  font-weight: 600;
}

.test-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.test-button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.test-button.primary {
  background: #1890ff;
  color: white;
}

.test-button.primary:hover:not(:disabled) {
  background: #40a9ff;
}

.test-button.secondary {
  background: white;
  color: #1890ff;
  border: 1px solid #1890ff;
}

.test-button.secondary:hover {
  background: #f0f9ff;
}

.test-button.large {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
}

.test-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 支付结果区域 */
.result-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.result-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.result-card {
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e8e8e8;
}

.result-card.success {
  background: #f6ffed;
  border-color: #52c41a;
}

.result-card.error {
  background: #fff2f0;
  border-color: #ff4d4f;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.result-icon {
  font-size: 24px;
}

.result-status h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
}

.result-status p {
  margin: 0;
  color: #666;
}

.result-details,
.error-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.detail-item .label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
}

.detail-item .value {
  color: #1a1a1a;
  font-weight: 500;
}

.pay-link {
  color: #1890ff;
  text-decoration: none;
  word-break: break-all;
}

.pay-link:hover {
  text-decoration: underline;
}

/* 处理日志区域 */
.logs-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.logs-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.logs-container {
  background: #1f1f1f;
  border-radius: 8px;
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: #d9d9d9;
}

.log-item.info .log-level {
  color: #52c41a;
}

.log-item.warn .log-level {
  color: #faad14;
}

.log-item.error .log-level {
  color: #ff4d4f;
}

.log-item.debug .log-level {
  color: #1890ff;
}

.log-time {
  color: #888;
  min-width: 80px;
}

.log-level {
  min-width: 50px;
  font-weight: 600;
}

.log-message {
  flex: 1;
}

/* 未配置提示 */
.no-config-tip {
  background: linear-gradient(135deg, #f6f8ff 0%, #e6f3ff 100%);
  border: 2px dashed #1890ff;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  margin-bottom: 24px;
}

.tip-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.no-config-tip h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1890ff;
  margin: 0 0 12px 0;
}

.no-config-tip p {
  color: #666;
  font-size: 16px;
  margin: 0;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .workflow-steps {
    flex-direction: column;
    align-items: center;
  }

  .test-actions {
    flex-direction: column;
  }

  .order-form .form-row,
  .info-grid,
  .result-details,
  .error-details {
    grid-template-columns: 1fr;
  }

  .summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
</style>